<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, max-scale=1, min-scale=1, viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Qkids久趣英语</title>
  <meta name="_token" content="{{ csrf_token() }}"/>
  <script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/rem.js"></script>
  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/css/clocks.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  <script type="text/javascript">window.CDN_RESOURCE = "{{env('CDN_RESOURCE')}}"</script>
</head>
<body>
<div class="container">
  <div class="card-1" style="display: none;">
    <div class="avatar">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="nickname"></div>
    <div class="title">
      正在进行<span class="day"></span>的挑战
    </div>
    <div class="split-line-1"></div>
    <div class="banner" date-text="">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="description"></div>
    <div class="progress">
      <div class="day">
        <div class="progress-title">已挑战天数</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="lesson">
        <div class="progress-title">已打卡课程</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="exercise">
        <div class="progress-title">已完成练习</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div>
    </div>
    <div class="split-line-2"></div>
    <div id="clocks-buttons" class="button" style="display: none;">
      <button class="share" id="clocks-btn">打卡得抵用券</button>
    </div>
    <a class="share-qrcode" href="javascript:void(0);">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_qrcode3.png">
    </a>
  </div>
  <div class="card-2" style="display: none;">
    <div class="avatar">
      <img src="" style="visibility: hidden;" onerror="this.style.visibility='hidden'"
           onload="this.style.visibility='visible'">
    </div>
    <div class="nickname"></div>
    <div class="title">
      正在进行<span class="day"></span>的挑战<br/>
      <span style="font-size: 0.14rem;">学习到<span class="desc"></span></span>
    </div>
    <div class="progress">
      <div class="day">
        <div class="progress-title">已挑战天数</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="lesson">
        <div class="progress-title">已打卡课程</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div><div class="dot">
        <span></span>
        <span></span>
        <span></span>
      </div><div class="exercise">
        <div class="progress-title">已完成练习</div>
        <div class="count"></div>
        <div class="progress-bar-bg"><div class="progress-bar"></div></div>
      </div>
    </div>
    <div class="split-line-1"></div>
    <div id="clocks-buttons" class="button" style="display: none;">
      <button class="share" id="clocks-btn">打卡得抵用券</button>
    </div>
    <a class="share-qrcode" href="javascript:void(0);">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_qrcode4.png">
    </a>
  </div>
  <a class="share-link" href="javascript:void(0);" style="display: none;">
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/share_link.png">
  </a>
</div>
<div class="msgbox-mask" id="msgbox-mask" style="display: none;">
  <div class="msgbox" id="msgbox">
    <div id="clock-success">
      <img class="head" src="{{env('CDN_RESOURCE')}}/mobile/campaign/achievement/img/msgbox-head.png">
      <div class="msgbox-title">打卡成功</div>
      <div class="msgbox-content">恭喜获得</div>
      <div class="ticket">
        <div class="left" id="coupon-id">5</div><div class="right">
          <div class="ticket-name">打卡优惠券</div>
          <div class="ticket-time">2018/03/04</div>
        </div>
      </div>
      <div class="thank">好的</div>
    </div>
  </div>
</div>
<div class="share-mask">
  <div class="share-arrow"></div>
</div>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_touch.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/moment.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/underscore.min.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js?v={{config('app.version')}}" crossorigin></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/wx_config.js" crossorigin></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>
<script>
  window.onerror = function(msg, url, line, col, error) {
    $.ajax({
      type: 'POST',
      url: '/wx/error',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        '_token': '{{ csrf_token() }}',
      },
      data: {
        page: 'clocks',
        msg: msg,
        url: url,
        line: line,
        col: col,
        error: error,
      }
    })
  };
  $(function () {

    var rem = window.rem || 0;
    var channel = Math.random() < 0.5 ? 'achievement_qrcode2' : 'achievement_qrcode'
    var analytics = AV.analytics({
      appId: 'antYy9lOFi5mkU9QKjtYmRLM-gzGzoHsz',
      appKey: 'jqyWxLyobpsmdwsJddJlDheb'
    })
    analytics.send({
      event: 'clock-open',
      attr: {
        clockId: "{{$clockId}}"
      }
    })
    var account = new Account({
      closeBtn: false
    })
    var configOption = {
      timestamp: '{{$signature['timestamp']}}',
      nonceStr: '{{$signature['nonceStr']}}',
      signature: '{{$signature['signature']}}',
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone']
    }
    var wxconfig = new WxConfig(configOption, 'clocks')
    var shareFlag = '', shareMsg = '', clocks = null, userInfo = null, current = null, weeks = null, days = null

    init()

    // 初始化页面数据
    function init () {
      account.getUserInfo(function (err, user) {
        if (!err) {
          userInfo = user
          shareFlag = user.shareFlag
          account.ajax({
            type: 'GET',
            path: '/s/achievements/clocks/' + '{{$clockId}}' + "?timestamp=" + moment().unix(),
            success: function (resp1) {
              clocks = resp1
              account.ajax({
                type: 'GET',
                path: '/s/achievements/current',
                success: function (resp2) {
                  current = resp2
                  days = moment(current.targetFinishTime * 1000).diff(moment(current.startTime * 1000), 'days')
                  weeks = moment(current.targetFinishTime * 1000).diff(moment(current.startTime * 1000), 'weeks')

                  $('.nickname').text(user.nickname)
                  if (user.headerSmall) $('.avatar > img').attr('src', user.headerSmall)

                  $('.title .day').text('「' + weeks + '周上' + current.targetLessonCount + '节课」')
                  $('.banner').attr('date-text', clocks.lesson.course.name + '-' + clocks.lesson.name)
                  $('.title .desc').text(clocks.lesson.course.name.replace('L', 'Level') + ' ' + clocks.lesson.name + '课')
                  $('.banner > img').attr('src', clocks.lesson.logoHDUri)
                  $('.description').html('<span>Goal</span> : ' + clocks.lesson.description)

                  $('.progress > .day > .count').text(current.startDays)
                  $('.progress > .lesson > .count').text(current.clockInCount)
                  $('.progress > .exercise > .count').text(current.finishedTestCount)
                  $('.day > .progress-bar-bg > .progress-bar').css('width', (current.startDays * 100 / days) + '%')
                  $('.lesson > .progress-bar-bg > .progress-bar').css('width', (current.clockInCount * 100 / current.targetLessonCount) + '%')
                  $('.exercise > .progress-bar-bg > .progress-bar').css('width', '100%')

                  if (clocks.clockIn) {
                    console.log('已打卡');
                    if (channel === 'achievement_qrcode2') {
                      $('.card-1').hide()
                      $('.share-qrcode').show()
                      $('#share-link').hide()
                      $('#clocks-buttons').hide()
                      $('.card-2').show()
                    } else {
                      $('.card-2').hide()
                      $('.share-qrcode').show()
                      $('#clocks-buttons').hide()
                      $('.card-1').show()
                      if (utils.isWeChat() && utils.isIOS() && history.length > 1) $('.card-1').css('bottom', '0.1rem')
                      var qrcodeHeight = $('.card-1').height() - (30 * rem + $('.card-1 .nickname').outerHeight(true) + $('.card-1 .title').outerHeight(true) + $('.card-1 .split-line-1').outerHeight(true) + $('.card-1 .banner').outerHeight(true) + $('.card-1 .description').outerHeight(true) + $('.card-1 .progress').outerHeight(true) + $('.card-1 .split-line-2').outerHeight(true))
                      $('.card-1 .share-qrcode').css('margin', ((qrcodeHeight - 85 * rem) / 200) + 'rem auto')
                    }
                  } else {
                    console.log('未打卡');
                    $('.share-qrcode').hide()
                    $('#share-link').hide()
                    $('#clocks-buttons').show()
                    $('.card-1').show()
                  }
                  shareMsg = {
                    title: '【Qkids久趣】' + userInfo.nickname + '正在挑战' + weeks + '周跟北美外教学习' + current.targetLessonCount + '节课：第' + current.finishedLessonCount + '次课',
                    desc: '严选北美外教在线授课，创造趣味十足的课堂体验，让孩子爱学更有效',
                    link: window.location.protocol + '//' + window.location.host + '/wx/achievement/clocks/' + clocks.clockId + '/share?_r=' + shareFlag + '&_c=' + channel,
                    imgUrl: clocks.lesson.logoUri || 'https://static-app.97kid.com/site-student/public/img/share.png',
                    success: function (target) {
                      $('.share-mask').fadeOut()
                      analytics.send({
                        event: 'clock-share',
                        attr: {
                          clockId: "{{$clockId}}",
                          target: target,
                        }
                      })
                      if (clocks.clockIn === 0 && target === 'timeline') clock()
                    }
                  }
                  console.log(shareMsg);
                  wxconfig.activeShare(shareFlag, '', shareMsg)
                },
                error: function (err) {
                  $.toastAlert(err.message, 2)
                }
              })
            },
            error: function (err) {
              $.toastAlert(err.message, 2)
            }
          })
        }
      })
    }

    // 打卡接口
    function clock (cnt) {
      account.ajax({
        type: 'POST',
        path: '/s/achievements/clocks/' + clocks.appointmentId + "?timestamp=" + moment().unix(),
        success: function (data) {
          if (data.couponId) {
            switch (data.couponId) {
              case 32:
                $('#coupon-id').text('3')
                break
              case 33:
                $('#coupon-id').text('5')
                break
              case 34:
                $('#coupon-id').text('10')
                break
            }
            $('.ticket-time').text(moment().add(365, 'days').format('YYYY/MM/DD'))
            showMsgBox('clock-success')
          }
          init()
          analytics.send({
            event: 'clock-in',
            attr: {
              clockId: "{{$clockId}}"
            }
          })
        },
        error: function (err) {
          if (!cnt) cnt = 0;
          if (cnt < 3 && err.code == 'unknown.error') {
            return clock(cnt + 1);
          }
          $.toastAlert(err.message, 2)
        }
      })
    }

    $('#clocks-btn').off('click').on('click', function () {
      // 弹出微信分享提示
      $('.share-mask').fadeIn()
    })
    $('.thank').off('click').on('click', function () {
      hiddenMsgBox()
      var defaultLink = shareFlag ? (window.location.protocol + '//' + window.location.host + '/wx?_r=' + shareFlag) : window.location.protocol + '//' + window.location.host + '/wx'
      location.href = typeof shareMsg.link === 'string' ? shareMsg.link : defaultLink
    })
    $('.share-mask').click(function () {
      $(this).fadeOut()
    })
    $('#msgbox').click(function (e) {
      e.stopPropagation()
    })
    $('#msgbox-mask').click(function (e) {
      e.stopPropagation()
      hiddenMsgBox()
    })
    $('.share-qrcode').on('longTap', function (e) {
      e.preventDefault();
      analytics.send({
        event: 'clock-share-qrcode',
        attr: {
          clockId: "{{$clockId}}"
        }
      })
      return;
    })
  })
  function showMsgBox (msgboxId) {
    hiddenMsgBox()
    $('#msgbox-mask').css('display', 'block')
    $('#' + msgboxId).css('display', 'block')
  }
  function hiddenMsgBox () {
    $('#msgbox-mask').css('display', 'none')
    var msgboxList = $('#msgbox').children()
    for (var i = 0; i < msgboxList.length; i++) $(msgboxList[i]).css('display', 'none')
  }
</script>
</body>
</html>